<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="4" :xs="24">
        <el-input v-model="deptName" placeholder="请输入组织名称" clearable
                  size="small" prefix-icon="el-icon-search" @keyup.enter.native="handleSelectOrgCode"
        />
        <el-tree style="margin-top: 20px"
                 :data="deptOptions"
                 :filter-node-method="filterNode"
                 :expand-on-click-node="false"
                 ref="tree"
                 default-expand-all
                 @node-click="handleNodeClick"
        />
      </el-col>

      <el-col :span="20" :xs="24">
        <div>
          <el-tag>{{ selectedOrgLabel }} &nbsp; 产品总数:<span style="color: #2c5d3c;font-weight: bold">{{ amount }}</span>
          </el-tag>
          <el-button
            type="warning"
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
            v-hasPermi="['statistic:totalDeviceCount:export']"
          >导出
          </el-button>
        </div>
        <div>
          <bar-chart :chart-data="productCountChartData" :height="height"/>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { deptTreeSelect } from '@/api/system/dept'
import { exportProductCount, getProductCountChart } from '@/api/system/statistic'
import BarChart from '@/views/dashboard/BarChart'

export default {
  name: 'index',
  components: {
    BarChart
  },
  data() {
    return {
      height: '600px',
      dataZoom: [{
        type: 'inside',
        start: 0,
        yAxisIndex: [0]
      },
        {
          type: 'slider',
          start: 0,
          yAxisIndex: [0]
        }],
      // 查询参数
      queryParams: {
        orgCode: ''
      },
      productCountChartData: {
        yAxisData: [], count: [], color: '#2c5d3c', position: 'right'
      },
      // 部门树选项
      deptOptions: undefined,
      deptName: undefined,
      selectedOrgLabel: '',
      amount: 0
    }
  },
  created() {
    this.getTreeselect()
    this.getList()
  },
  watch: {
    productCountChartData(value) {
      if (value) {
        let list = value.count
        let count = 0
        for (let i = 0, len = list.length; i < len; i++) {
          count += list[i]
        }

        this.amount = count
      } else {
        this.amount = 0
      }
    }
  }
  ,
  methods: {
    /** 查询报表数据 */
    getList() {
      if (!this.queryParams.orgCode || this.queryParams.orgCode === '') {
        this.queryParams.orgCode = this.$store.getters.orgCode
      }

      if (!this.selectedOrgLabel || this.selectedOrgLabel === '') {
        this.selectedOrgLabel = this.$store.getters.deptName
      }

      getProductCountChart(this.queryParams).then(response => {
        let productCount = response.data
        let yAxisData = []
        let count = []

        for (let i = 0; i < productCount.length; i++) {
          yAxisData.push((response.data)[i].axisData)
          count.push((response.data)[i].count)
        }
        this.dataZoom[0].start = productCount.length
        this.dataZoom[1].start = productCount.length
        this.productCountChartData = { yAxisData, count, color: '#2c5d3c', position: 'right', dataZoom: this.dataZoom }
      })
    },

    /** 查询部门下拉树结构 */
    getTreeselect() {
      deptTreeSelect().then(response => {
        this.deptOptions = response.data
      })
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.getList()
    },

    handleSelectOrgCode() {
      this.$refs.tree.filter(this.deptName)
      this.handleQuery()
    },

    /** 导出按钮操作 */
    handleExport() {
      this.$confirm('是否确认导出?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return exportProductCount({ orgCode: this.queryParams.orgCode })
      }).then(response => {
        this.download(response.msg)
      }).catch(function() {
      })
    },

    // 节点单击事件
    handleNodeClick(data) {
      this.queryParams.orgCode = data.orgCode
      this.selectedOrgLabel = data.label
      this.handleQuery()
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    }
  }
}
</script>

<style scoped>

</style>
